<template>
  <div class="wrap">
    <div class="title_box">
      <span class="left">设备日志</span>
      <span class="right">{{ equipmentStore.devInfo.devName }}</span>
    </div>
    <a-card class="card_search">
      <div class="search_box">
        <a-form :model="getDevLogParams" :style="{ width: '1600px' }" layout="inline">
          <a-form-item label="选择时间">
            <a-range-picker
              style="width: 300px"
              :time-picker-props="{ defaultValue: ['00:00:00'] }"
              format="YYYY-MM-DD "
              v-model="searchTime"
              @clear="timeClear"
            />
          </a-form-item>
          <a-form-item label="日志类型">
            <a-select
              :style="{ width: '200px' }"
              v-model="getDevLogParams.devLogTypeCode"
              placeholder="请选择日志类型"
              allow-clear
            >
              <a-option v-for="dltl in devLogTypeList" :key="dltl.sort" :value="dltl.dictCode">{{
                dltl.dictName
              }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="事件类型">
            <a-select
              :style="{ width: '200px' }"
              v-model="getDevLogParams.devEventTypeCode"
              placeholder="请选择事件类型"
              allow-clear
            >
              <a-option v-for="dletl in devLogEventTypeList" :key="dletl.sort" :value="dletl.dictCode">{{
                dletl.dictName
              }}</a-option>
            </a-select>
          </a-form-item>
          <a-button type="primary" @click="selectBtnClick">
            <template #icon>
              <icon-search />
            </template>
            查询
          </a-button>
          <a-button type="primary" status="danger" style="margin-left: 10px" @click="resetBtnClick">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </a-form>
      </div>
    </a-card>
    <a-card class="card_tab">
      <a-table
        :loading="isShowTableLoading"
        :data="devLogList"
        :columns="devLogTableColumns"
        :bordered="{ cell: true }"
        :pagination="{ total: total, current: getDevLogParams.page }"
        @page-change="tabPageChange"
      >
        <template #index="{ rowIndex }">
          <span>{{ (getDevLogParams.page - 1) * 10 + (rowIndex + 1) }}</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'devLog'
})
</script>
<script lang="ts" setup>
import data from '@/mock/file/data'
import type { title } from 'process'
// 引入
import { getDevLogListApi, getAllDevLogTypeListApi, getAllDevLogEventTypeListApi } from '@/apis/equipment/index.ts'
import { useEquipmentStore } from '@/store'
import { Message } from '@arco-design/web-vue'

const equipmentStore = useEquipmentStore()

// 时间选择器的清除按钮事件
const timeClear = () => {
  searchTime.value = []
}

// 查询按钮的点击事件
const selectBtnClick = () => {
  getDevLogParams.value.page = 1
  if (searchTime.value.length == 2) {
    getDevLogParams.value.startTime = searchTime.value[0] + ' 00:00:00'
    getDevLogParams.value.endTime = searchTime.value[1] + ' 23:59:59'
  } else {
    getDevLogParams.value.startTime = ''
    getDevLogParams.value.endTime = ''
  }
  getDevlogFunc()
    .then(() => {
      Message.success('查询成功')
    })
    .catch(() => {
      Message.success('查询失败')
    })
}

// 重置按钮的点击事件
const resetBtnClick = () => {
  getDevLogParams.value.page = 1
  getDevLogParams.value.startTime = ''
  getDevLogParams.value.endTime = ''
  getDevLogParams.value.devLogTypeCode = ''
  getDevLogParams.value.devEventTypeCode = ''
  searchTime.value = []
  getDevlogFunc()
    .then(() => {
      Message.success('重置成功')
    })
    .catch(() => {
      Message.success('重置失败')
    })
}

// 定义设备日志表格的字段规则
const devLogTableColumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center',
    width: 80
  },
  {
    title: '设备名称',
    dataIndex: 'devName',
    slotName: 'devName',
    align: 'center',
    width: 100
  },
  {
    title: '日志内容',
    dataIndex: 'devLogContent',
    slotName: 'devLogContent',
    align: 'center',
    width: 200
  },
  {
    title: '日志类型',
    dataIndex: 'devLogTypeName',
    slotName: 'devLogTypeName',
    align: 'center',
    width: 100
  },
  {
    title: '事件类型',
    dataIndex: 'devEventTypeName',
    slotName: 'devEventTypeName',
    align: 'center',
    width: 100
  },
  {
    title: '操作人',
    dataIndex: 'operateUser',
    slotName: 'operateUser',
    align: 'center',
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    slotName: 'createTime',
    align: 'center',
    width: 100
  }
])

// 当前页码发生变化的事件
const tabPageChange = (e: any) => {
  getDevLogParams.value.page = e
  getDevlogFunc()
    .then(() => {
      Message.success('加载数据成功')
    })
    .catch(() => {
      Message.success('加载数据失败')
    })
}

// 选择的时间数据
const searchTime = ref([])

// 表格加载状态的标识
const isShowTableLoading = ref(false)

// 设备日志数据列表
const devLogList = ref([])

// 设备日志类型数据列表
const devLogTypeList = ref([])

// 设备日志事件类型数据列表
const devLogEventTypeList = ref([])

// 分页获取设备日志数据携带的参数
const getDevLogParams = ref({
  page: 1,
  size: 10,
  devId: equipmentStore.devInfo.devId,
  devLogTypeCode: '',
  devEventTypeCode: '',
  startTime: '',
  endTime: ''
})

// 分页数据的总条数
const total = ref(0)

// 分页获取设备日志的数据的函数
const getDevlogFunc = async () => {
  isShowTableLoading.value = true
  const res = await getDevLogListApi(getDevLogParams.value)
  devLogList.value = res.data.list
  total.value = res.data.total
  isShowTableLoading.value = false
}

// 获取所有日志类型数据的函数
const getDevLogTypeListFunc = async () => {
  const res = await getAllDevLogTypeListApi()
  devLogTypeList.value = res.data
}

// 获取日志时间类型的数据的函数
const getDevLogEventTypeListFunc = async () => {
  const res = await getAllDevLogEventTypeListApi()
  devLogEventTypeList.value = res.data
}

// 初始化
onMounted(() => {
  console.log(equipmentStore)
  getDevlogFunc()
  getDevLogTypeListFunc()
  getDevLogEventTypeListFunc()
})
</script>

<style scoped>
.wrap {
  padding: 14px;
}

.title_box {
  font-size: 20px;
  font-family: '微软雅黑';
  font-weight: bold;
  margin-bottom: 10px;
}
.title_box .right {
  font-size: 18px;
  margin-left: 10px;
}

.search_box {
  /* padding-top */
  height: 40px;
}

.card_search {
  margin-bottom: 10px;
}

.card_tab {
  height: 74vh;
}
</style>
